<template>
  <div id="app">
    <div class="bottom-nav" v-if="$route.path === '/'">
      <button @click="loadDensityData()">网格热力图</button>
      <button @click="loadDensity()">蜂窝热力图</button>
      <button @click="echartShow()">图表分析</button>
      <button @click="ConsoleShow()">数据查询</button>
    </div>
    <keep-alive><router-view></router-view></keep-alive>
    <echarts-comp></echarts-comp>
  </div>
</template>
<script >
import EchartsComp from "./components/EchartsComp.vue";
import ConsoleMap from "./components/ConsoleMap.vue";
import { useCounterStore } from "./stores/counter.js";
export default {
  components: { EchartsComp, ConsoleMap },
  data() {
    return {
      options: [
        {
          label: "查询",
          options: [
            {
              value: "select",
              label: "拉框查询",
            },
          ],
        },
        {
          label: "测量",
          options: [
            {
              value: "changdu",
              label: "长度",
            },
            {
              value: "mianji",
              label: "面积",
            },
            {
              value: "point",
              label: "点",
            },
          ],
        },
      ], //下拉框配置项
      selectvalue: "",
      store: {},
      layer1Show: false,
      layer1: {},
      layer2: {},
      layer2Show: false,
      ConsoleMap: {},
    };
  },
  mounted() {
    this.store = useCounterStore();
  },
  methods: {
    //加载热力蜂窝图--------
    loadDensity() {
      if (Object.keys(this.layer2).length === 0) {
        alert("正在加载全球国人密度");
        fetch(
          "https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv"
        )
          .then((res) => res.text())
          .then((data) => {
            this.layer2 = new L7.HeatmapLayer({})
              .source(data, {
                parser: {
                  type: "csv",
                  x: "lng",
                  y: "lat",
                },
                transforms: [
                  {
                    type: "hexagon",
                    size: 20000,
                    field: "v",
                    method: "sum",
                  },
                ],
              })
              .size("sum", (value) => {
                return value * 20;
              })
              .shape("hexagonColumn")
              .color(
                "count",
                [
                  "#FF4818",
                  "#F7B74A",
                  "#FFF598",
                  "#FF40F3",
                  "#9415FF",
                  "#421EB2",
                ].reverse()
              )
              .style({
                coverage: 0.9,
                angle: 0,
              });

            this.$scene.addLayer(this.layer2);
            //this.layer2.hide();
          });
      } else {
        this.layer2Show = !this.layer2Show;
        if (this.layer2Show) {
          this.layer2.hide();
        } else {
          this.layer2.show();
        }
      }
    },

    //加载网格图-----
    loadDensityData() {
      if (Object.keys(this.layer1).length === 0) {
        alert("正在加载全球国人分布");
        fetch(
          "https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv"
        )
          .then((res) => res.text())
          .then((data) => {
            this.layer1 = new L7.HeatmapLayer({})
              .source(data, {
                parser: {
                  type: "csv",
                  x: "lng",
                  y: "lat",
                },
                transforms: [
                  {
                    type: "grid",
                    size: 10000,
                    field: "v",
                    method: "sum",
                  },
                ],
              })
              .shape("square")
              .style({
                coverage: 1,
                angle: 0,
              })
              .color(
                "count",
                [
                  "#FF3417",
                  "#FF7412",
                  "#FFB02A",
                  "#FFE754",
                  "#46F3FF",
                  "#02BEFF",
                  "#1A7AFF",
                  "#0A1FB2",
                ].reverse()
              );
            this.$scene.addLayer(this.layer1);
          });
      } else {
        this.layer1Show = !this.layer1Show;
        if (this.layer1Show) {
          this.layer1.hide();
        } else {
          this.layer1.show();
        }
      }
    },
    //控制图表显隐
    echartShow() {
      const myDiv = document.querySelector(".echarts");
      if (myDiv.style.display === "none") {
        myDiv.style.display = "block";
      } else {
        myDiv.style.display = "none";
      }
    },
    //数据查询
    ConsoleShow() {
      this.$router.push("/chinaMap");
    },
  },
};
</script>

<style lang="scss" >
.bottom-nav {
  bottom: 10px;
  position: fixed;
  left: 50%;
  display: flex;
  gap: 20px;
  transform: translateX(-50%);
  z-index: 10000 !important;
  /* From Uiverse.io by biswacpcode */
  button {
    color: white;
    width: 200px;
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.5) !important;
    font-size: 20px;
    border: none;
    background: none;
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    border-radius: 4px;
  }
  button::before {
    margin-left: auto;
  }

  button::after,
  button::before {
    content: "";
    width: 0%;
    height: 2px;
    background: #f6f8f7;
    display: block;
    transition: 0.5s;
  }

  button:hover::after,
  button:hover::before {
    width: 100%;
  }
}
</style>